How to send custom form data to Microsoft Power Automate
SEND CUSTOM FORM DATA INTO MICROSOFT POWER AUTOMATE
In this article, I will be explaining the steps to send form data directly to Microsoft Power Automate and trigger the Flow using PHP cURL and HTML.
STEP - 1
First, you will have to create a Custom HTML file and name it index.html
Also, Read - How to get and Set a Look up field using JavaScript in MS Dynamics 365
In the index.html file please must include Jquery CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
This is CSS Style for the form. You can also include Bootstrap as I have used it in the form
<style> .php-email-form { height: auto; background-color: #eee; box-shadow: 0 0 30px rgba(214, 215, 216, 0.6); padding: 25px; } .validation{color:red;font-size: small;} .loading { display: none; background: #fff; text-align: center; padding: 15px; } .error-message { display: none; color: #fff; background: #ed3c0d; text-align: left; padding: 15px; font-weight: 600; } .sent-message { display: none; color: #fff; background: #18d26e; text-align: center; padding: 15px; font-weight: 600; } .btn-color { padding: 10px 15px; background-color: #4e90cd; border-color: #4e90cd; color: #fff; border-bottom: none; border-right: none; -webkit-writing-mode: horizontal-tb !important; text-rendering: auto; letter-spacing: normal; word-spacing: normal; text-indent: 0px; text-shadow: none; display: inline-block; text-align: center; font: 500 15px roboto; border-width: 2px; border-style: outset; border-image: initial; overflow: visible; text-transform: none; text-decoration: none; border-radius: .25rem; border-bottom: none; border-right: none; align-items: center; justify-content: center; } .btn-color:hover { color: #ffffff; background-color: #5376ab; border-color: #5376ab; } .small, small { font-size: 80%; font-weight: 400; color: red; } </style>
HTML code will look like this
<div class="col-lg-12" data-aos="fade-up" data-aos-delay="400"> <h2 style="text-align:center">Send data to Microsoft Power Automate using PHP</h2> <form action="javascript:void(0);" method="post" role="form" id="contactForm" class="php-email-form"> <div class="row"> <div class="col-lg-12 form-group"> <input type="email" name="to" class="form-control" id="to" placeholder="Email Address" data-rule="minlen:4" data-msg="Please enter your email" /> <div class="validation"></div> </div> <div class="col-lg-12 form-group"> <input type="text" name="subject" class="form-control" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter your subject" /> <div class="validation"></div> </div> <div class="form-group col-lg-12"> <textarea class="form-control" name="body" id="body" rows="4" data-rule="required" data-msg="Please write your message" placeholder="Message" spellcheck="false"></textarea> <div class="validation"></div> </div> <div class="col-lg-12"> <div class="loading">Loading...</div> <div class="error-message">Failed. please try again later!</div> <div class="sent-message">Your request has been sent. Thank you!</div> </div> <div class="text-center"> <button id="submit" name="submit" class="btn-color content-center">Send Request</button> </div> </form> </div>
Also, Read - How to Connect SharePoint Using PHP
Also, Read - How to Sync custom fields in Outlook from SharePoint Task List
Now we need to send the Request without refreshing the page so we will have to use Jquery Ajax to achieve it .. So here is the Jquery code to send a request to our backend file
<script> jQuery(document).ready(function($) { "use strict"; //Contact $('#contactForm').submit(function(){ var f = $(this).find('.form-group'), ferror = false, emailExp = /^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i; f.children('input').each(function(){ // run all inputs var i = $(this); // current input var rule = i.attr('data-rule'); if( rule !== undefined ){ var ierror=false; // error flag for current input var pos = rule.indexOf( ':', 0 ); if( pos >= 0 ){ var exp = rule.substr( pos+1, rule.length ); rule = rule.substr(0, pos); }else{ rule = rule.substr( pos+1, rule.length ); } switch( rule ){ case 'required': if( i.val()==='' ){ ferror=ierror=true; } break; case 'minlen': if( i.val().length<parseInt(exp) ){ ferror=ierror=true; } break; case 'email': if( !emailExp.test(i.val()) ){ ferror=ierror=true; } break; case 'checked': if( !i.attr('checked') ){ ferror=ierror=true; } break; case 'regexp': exp = new RegExp(exp); if( !exp.test(i.val()) ){ ferror=ierror=true; } break; } i.next('.validation').html( ( ierror ? (i.attr('data-msg') !== undefined ? i.attr('data-msg') : 'wrong Input') : '' ) ).show('blind'); } }); f.children('textarea').each(function(){ // run all inputs var i = $(this); // current input var rule = i.attr('data-rule'); if( rule !== undefined ){ var ierror=false; // error flag for current input var pos = rule.indexOf( ':', 0 ); if( pos >= 0 ){ var exp = rule.substr( pos+1, rule.length ); rule = rule.substr(0, pos); }else{ rule = rule.substr( pos+1, rule.length ); } switch( rule ){ case 'required': if( i.val()==='' ){ ferror=ierror=true; } break; case 'minlen': if( i.val().length<parseInt(exp) ){ ferror=ierror=true; } break; } i.next('.validation').html( ( ierror ? (i.attr('data-msg') != undefined ? i.attr('data-msg') : 'wrong Input') : '' ) ).show('blind'); } }); if( ferror ) return false; else var str = $(this).serialize(); $.ajax({ // alert("enterd the loop") type: "POST", url: "sendRequest.php", data: str, success:function(data){ $('.loading').css('display','none'); $('.sent-message').css('display','block'); $("#contactForm")[0].reset(); }, error:function (data){ $('.loading').css('display','none'); $('.error-message').css('display','block'); $("#contactForm")[0].reset(); } }); return false; }); }); </script>
The above codes are for the index.html file now we are going to work on the PHP file.
So we are using PHP cURL to send the request to Microsoft Power Automate but before doing that we will have to generate a URL from flow to use on PHP
Also, Read - How to connect Quikbooks Online using Microsoft Power Automate
Our goal is to send the request to flow using our form so for that we will need request formate to send so we are going to use JSON for it.
{
"emailaddress":"<your address goes here>",
"emailSubject": "Test Subject",
"emailBody": "Request from custom HTML form"
}
We will also need a JSON schema defining the format of the request. So we are going to use some JSON Schema Generator online tool.
I used Liquid JSON Schema Generator
Copy Paste the above code and click on Generate Schema button. The tool will generate a schema like this
{
"$schema": "http://json-schema.org/draft-04/schema#",
"type": "object",
"properties": {
"emailaddress": {
"type": "string"
},
"emailSubject": {
"type": "string"
},
"emailBody": {
"type": "string"
}
},
"required": [
"emailaddress",
"emailSubject",
"emailBody"
]
}
We will discuss STEP -2 in the Next Blog.
Also, Read - How to connect Tsheets using Microsoft Power Automate
Also, Read - How to change the Activity Status value using JavaScript in MS Dynamics 365
Also, Read - How to clone record using JavaScript and Open it in New Window in MS Dynamics 365
If you find this blog post helpful then please share it with your friends on Social media. Thank you.
Comments
Post a Comment